<!-- 重点关注 -->
<template>
  <div class="padding-sp">
   
    <el-form class="new-form-input-top" label-width="100px" label-position="left">
      <el-row :gutter="50">
        <el-col :span="8">
          <el-form-item label="收支类型">
            <el-select v-model="m_Form.type" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="具体项目">
            <el-select v-model="m_Form.projectKey" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="资产">
            <el-select v-model="m_Form.chargeItemKey" placeholder="请选择">
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="form-button">
        <div class="form-btn">筛选</div>
      </div>
    </el-form>
    <div>
      <div v-for="(item, index) in m_DataList" :key="index" class="item-force">
        <div class="desc-bottom" style="padding-bottom: 20px">
          <span style="font-size: 18px; padding-right: 40px">{{ 'xxx类型' }}</span
          >{{ m_itemTypeText[item.itemType] }}
        </div>
        <div v-for="(em, j) in item.emphasisAttentionDto" :key="j">
          <div class="desc-bottom desc">{{ em.focusInstruction }}</div>
          <div class="desc-bottom infor">{{ '说明：' + em.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Api from '../../api/incomeAndExpenditurePlan';
export default {
  data() {
    return {
      m_itemTypeText: {
        1: '低于上一年收入',
        2: '低于年收入目标涨幅',
        3: '低于租金指导价',
        4: '支出高于上一年',
        5: '新增支出事项',
        6: '支出发生在维保期内',
      },
      m_Form: {
        type: null, //收支类型
        projectKey: null, //具体项目Key
        chargeItemKey: null, //资产
      },
      options: [],
      m_DataList: [
        // {
        //   name: '商铺租金',
        //   name1: '未达到年收入涨幅5%',
        //   desc1: '商铺203本财年年计划收入￥2,012,031元 涨幅3% 未达到 本财年目标年收入涨幅5%。',
        //   infor1: '说明：因该商铺临时退租，导致空置约90天',
        // },
      ],
    };
  },
  mounted() {
    this.GetData();
  },
  methods: {
    GetData() {
      // this.$route.query.processWorkId ? 'processEmphasisAttentionList' : 
      Api['emphasisAttentionList']({ ...this.m_Form, planKey:  this.$route.query.planKey }).then(res => {
        this.m_DataList = res.rows;
      });
    },
    // header上的提交
    submitTableCopy() {
      let planKey = this.$route.query.planKey ? this.$route.query.planKey : '';
      Api.submitTableCopy({ primaryKey: planKey }).then(res => {
        if (res.success) {
          this.GetData();
        }
      });
    },
  },
  components: {},
};
</script>
<style lang='scss' scoped>
.btn-submit {
  position: fixed;
  top: 14px;
  right: 310px;
  z-index: 9999;
}
.padding-sp {
  padding: 16px 30px;
}
.form-button {
  display: flex;
  justify-content: flex-end;
  .form-btn {
    height: 34px;
    line-height: 34px;
    background: #444444;
    color: #fff;
    border-radius: 5px;
    text-align: center;
    width: 80px;
    font-size: 15px;
    margin-top: -10px;
  }
}
.item-force {
  padding: 20px 0 10px 0;
  border-bottom: 1px solid #f6f6f6;
  .desc-bottom {
    padding-bottom: 10px;
    .color-blue {
      padding-right: 30px;
      font-size: 18px;
    }
  }
  .desc {
    font-size: 16px;
  }
  .infor {
    color: #999;
  }
}
.desc-images {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .item-images {
    margin-right: 15px;
  }
}
</style>